<script setup lang='ts'>
import type { PageInfo } from 'plus-pro-components'

import Footer from '@/pages/footer/footer.vue'
import { useGetTenderPage } from '@fl/api/man-api'
import { genOssUrl, oss } from '@fl/logics/oss'
import { useTagsViewStore } from '@fl/store/modules/tagsView'
import { cloneDeep } from 'lodash-es'
import { useRoute } from 'vue-router'

import { useTag } from '../home/component/useTag'
import { useView } from './use-view'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'tender-index',
})
const { currentRoute } = useRouter()
const tagsViewStore = useTagsViewStore()

onBeforeRouteLeave(async (to, _from, next) => {
    // 如果下一页是详情, 缓存当前列表
    if (to.name === 'tender-show') {
        tagsViewStore.addView(unref(currentRoute))
    }
    next()
})
const { query } = useRoute()
const { viewAuth } = useView()

const tenderImg = genOssUrl(oss.mall.tender)
const { category, getClass, getLabel } = useTag()

const initialState = {
    category: '',
    createTime: '',
    noticeName: '',
}

const state = ref<any>(cloneDeep(initialState))

const initialPager = {
    page: 1,
    pageSize: 10,
}

const pager = ref<PageInfo>(cloneDeep(initialPager))

const params = computed(() => ({
    ...state.value,
    page: pager.value?.page || 1,
    size: pager.value?.pageSize || 10,
}))

const records = ref([] as any[])
const total = ref(0)
const { data, isLoading } = useGetTenderPage(params)

watchEffect(() => {
    if (data.value) {
        records.value = data.value.records
        total.value = data.value.total
    }
})

function getDate(val: any) {
    if (!val?.releaseTime)
        return { date: '', y: '' }

    const arr = val.releaseTime.split('-')
    return {
        date: `${arr[1]}/${arr[2]}`,
        y: arr[0],
    }
}

watchEffect(() => {
    if (query.category) {
        state.value.category = Number(query.category)
    }
})
</script>

<template>
    <div class="relative h-300 w-full">
        <div class="tender-linear absolute size-full inset-0 z-1" />

        <img :src="tenderImg"
             class="absolute size-full inset-0"
        >

        <div class="pl-60 mx-auto flex h-full w-1300 items-center z-2">
            <div class="text-40 text-white font-400 z-2">
                招标公告
            </div>
        </div>
    </div>

    <div class="p-20 mx-auto mt-40 bg-white flex w-1300 items-center">
        <span>分类</span>

        <el-select v-model="state.category"
                   placeholder="全部分类"
                   style="width: 240px;"
                   class="ml-12"
                   clearable
        >
            <el-option v-for="item in category"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
            />
        </el-select>

        <span class="ml-20">关键字搜索</span>

        <el-input v-model="state.noticeName"
                  style="width: 240px;"
                  placeholder="请输入关键字"
                  class="input-with-select ml-12"
                  clearable
                  maxlength="10"
        >
            <template #suffix>
                <div i-material-symbols:search
                     class="size-16"
                />
            </template>
        </el-input>
    </div>

    <el-row v-loading="isLoading">
        <div class="p-20 mx-auto mt-20 bg-white w-1300">
            <ul class="divide-y divide-gray-2 flex flex-col">
                <li v-for="item in records"
                    :key="item.id"
                    class="py-16 flex items-center"
                    @click="() => viewAuth(item) "
                >
                    <div class="">
                        <div class="text-16 text-#4E5969 font-500">
                            {{ getDate(item)?.date }}
                        </div>

                        <div class="text-12 text-#767676 font-400">
                            {{ getDate(item)?.y }}
                        </div>
                    </div>

                    <div class="ml-30 text-16 font-600 text-ellipsis w-1000 cursor-pointer ws-nowrap of-hidden transition-all hover:text-red">
                        {{ item?.noticeName }}
                    </div>

                    <span class="inline-block rounded-3 text-12 lh-21 text-center h21 w64"
                          :class="getClass(item?.category)"
                    >
                        {{ getLabel(item?.category) }}
                    </span>
                </li>
            </ul>

            <PlusPagination v-model="pager"
                            :total="total"
                            :page-size-list="[10, 20, 30, 40, 50]"
            />
        </div>
    </el-row>

    <Footer />
</template>

<style lang="less" scoped>
.tender-linear {
    background: linear-gradient(
        180deg,
        rgb(29 33 41 / 37%) 0%,
        rgb(29 33 41 / 70%) 100%
    );
}

.jc-footer {
    background: #fff;
    margin-top: 20px;
}
</style>
